<!DOCTYPE html>
<html>
<head>
	<title>movie frame for canvas</title>
	<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
	<script type="text/javascript">
		var cv = null,ctx = null;
		var play_animate = true;

		$(window).ready(function(){
			cv = $("#cv");
			ctx = cv.get(0).getContext("2d");

			var b_start = $("#btn_start");
			var b_stop = $("#btn_stop");
			var b_replay = $("#btn_replay");

			b_start.hide();
			b_start.click(function(){
				$(this).hide();
				b_stop.show();

				play_animate = true;
				animate();
			});

			b_stop.click(function(){
				$(this).hide();
				b_start.show();
				play_animate = false;
			});

			b_replay.click(function(){
				init_animate();
			});

			init_animate();
			animate();
		});

		var Shape = function(x,y,w,h){
			this.x = x;
			this.y = y;
			this.w = w;
			this.h = h;
			this.r = Math.random()*100;
			this.angle = 0;
		}

		var shapes = [];
		
		function init_animate(){
			//x=0,w=10,h=10;
			shapes = [];
			for(var i=0;i<50;i++){
				var x = Math.random()*250;
				var y = Math.random()*250;
				var w = Math.random()*50;
				var h = w;
				shapes.push(new Shape(x,y,w,h))
			}
		}


		function animate(){
			if(play_animate){
				setTimeout(animate,33);
			}

			ctx.clearRect(0,0,cv.width(),cv.height());
			for(var i = 0;i < shapes.length;i++){
				var shape = shapes[i];
				var x = shape.x+(shape.r*Math.cos(shape.angle*(Math.PI/180)));
				var y = shape.y+(shape.r*Math.sin(shape.angle*(Math.PI/180)));
				shape.angle += 5;
				if(shape.angle > 360)
					shape.angle = 0;
				ctx.fillRect(x,y,shape.w,shape.h);
				//shape.x += Math.random()*4-2;
				//shape.y += Math.random()*4-2;
			}
		}
	</script>
	<style type="text/css">
		#cv{
			border: 5px solid green;
		}
	</style>
</head>
<body>
<h1>Show Movie Demo</h1>
<canvas id='cv' width="800" height="350"></canvas>
<div>
	<button id="btn_start">Start</button>
	<button id="btn_stop">Stop</button>
	<button id="btn_replay">Replay</button>
</div>
</body>
</html>